<template>
  <div id="mainDiv">
    <navi></navi>
    <info></info>


    <div id="orders">
      <schedule v-if="scheduleDialogIsShow" ref="showSchedule"></schedule>
      <div class="chefTitle">
        <div class="el-icon-fork-spoon">饭店订单管理</div>
      </div>
      <hr>
      <div class="orderInfo">
        <div>
        <span>订单编号</span>
        <span>用户</span>
        <span>订单开始时间</span>
        <span>订单结束时间</span>
        <span>金额</span>
        <span>订单状态</span>
        </div>
      </div>
      <div class="orderInfo"  v-for="(order,orderindex) in restaurant.orderForm">
        <div>
          <span>{{order.urno}}</span>
          <span>{{order.user.uname}}</span>
          <span>{{procesDate(order.uresdate)}}</span>
          <span>{{procesDate(order.uresendDate)}}</span>
          <span>{{order.uresprice}}</span>
          <span @click="processOrder(orderindex)">{{order.uresState}}</span>
        <template slot-scope="scope">
            <span>  <el-button
              size="mini"
              @click="allow(scope.$index, scope.row)">同意
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="deny(scope.$index, scope.row)">拒绝
            </el-button>
               </span>
          </template>

        </div>


      </div>
      <confirmOrder v-if="confirmDialogIsShow" ref="showAddOrder"></confirmOrder>
      <el-button
        size="mini"
        @click="getResOrder()" class="percess">查看订单
      </el-button>

    </div>


    <div id="projectdesc">


    </div>


  </div>
</template>

<script>
  import api from "../../../../axios/api"
  import utilsFD from "../../../../static/js/utils/index.js"
  import schedule from '@/components/front/restaurant/schedule.vue'
  import confirmOrder from '@/components/front/restaurant/confirmOrder.vue'
  import navi from "@/components/front/restaurant/navi.vue"
  import info from "@/components/front/restaurant/info.vue"

  export default {
    name: "index",
    data() {
      return {
        restaurant: "",
        pics:[],
        scheduleDialogIsShow: false,
        confirmDialogIsShow:false,
        begindate:utilsFD.FD.Fd().initCNDate(new Date()),
        rno:"",

      }

    },
    components : {
      schedule,confirmOrder,navi,info
    },
    methods: {
      procesDate(date){
        return utilsFD.FD.Fd().initCNDateFromlong(date);

      },
      processOrder(index){
        if (this.restaurant.orderForm[index].uresState.trim()=="未处理"){
          this.confirmDialogIsShow = true;
        this.$nextTick(() => {
          console.log( this.$refs.showAddOrder)
         this.$refs.showAddOrder.init(this.restaurant.orderForm[index]);
          // location.reload(true);
        })}

      },
      getResOrder: function () {
        let _this = this;
        _this.scheduleDialogIsShow = true;
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios( "/api/restaurantController/selectRestaurantWithorderAndUser/"+this.rno, null, "post")
          .then(dto => {
            let orderForms = dto.t.orderForm;
            var resDate = new Array();
            for(let index in orderForms){
              let order=orderForms[index]
              let begginDate = new Date(order.uresdate);
              let endDate = new Date(order.uresendDate);
              //console.log(begginDate+"------------" + endDate)
              while((endDate.getTime()-begginDate.getTime())>=0){
                let year = begginDate.getFullYear();
                let month = begginDate.getMonth().toString().length==1?"0"+(begginDate.getMonth()+1).toString():(begginDate.getMonth()+1);
                let day = begginDate.getDate().toString().length==1?"0"+begginDate.getDate():begginDate.getDate();
                // console.log(year+"-"+month+"-"+day);
                begginDate.setDate(begginDate.getDate()+1);
                let orderDay = {"date":year+"-"+month+"-"+day,"content":order.user.uname+'\n'+order.user.uphone}
                 console.log(orderDay)
                resDate.push(orderDay);
              }
               // console.log(order)
            }
            this.resDate = resDate;
            //console.log(resDate)
             console.log("-----9999999999999--------")
             //console.log(this.resDate)

            this.restaurant = dto.t;
          //  console.log("-----9999999999999--------")
            //console.log(this.$refs)
              this.$nextTick(() => {
                this.$refs.showSchedule.init(this.resDate, this.restaurant.orderForm);
              })
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）

      },
      allow(index,orderForm){

      },
      deny(index,orderForm){

      },
      getImgUrl: function (rpic) {
        return "/api/upload/images/restaurant/" + rpic;
      },
      setDataFromAxios: function () {

        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios( "/api/restaurantController/selectRestaurantWithorderAndUser/"+this.rno, null, "post")
          .then(dto => {
            console.log(dto);
            if(dto.code==200){
            this.restaurant = dto.t;
          }else if(dto.code == 302) {
          // this.$message.warning("请先登录")
          this.$router.push('/login')
        }
            // this.pics = this.restaurant.rpic.split(",");
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）

      },
    },
    created() {
      this.rno = this.$route.params.rno;
      if (this.rno == undefined || this.rno == null || this.rno == '') {
        this.rno = localStorage.getItem('rno');

      }
      this.setDataFromAxios();
    }
  }
</script>

<style type="text/css">

  /*margin表示到外边框，上一层元素的距离，最外层的div的上一层元素就是body，到左和右都为auto 就表示水平居中*/
  #mainDiv{border:solid 0px;width:1000px;height:600px;margin-left:auto;margin-right: auto;
    position: relative;
    font-family: "微软雅黑";}
  #skills{position: relative;}
  #skills >p {background-color: red;width:100px;height:26px;text-align: center;line-height: 26px;color:white;
    border-radius: 4px 4px 0px 0px}

  #skills > hr{width: 560px;position: absolute;top:16px;border:solid 1px #ff0000;}/*调整线的颜色*/
  #skills > ul > li{list-style-type: none;margin-top:5px;}
  #skills > ul > li > span{height:26px;display: inline-block;}
  #skills > ul > li > span:nth-child(1){width:140px;}
  #skills > ul > li > span:nth-child(2){width:140px;}
  #skills > ul > li > span:nth-child(3){width:80px;}

  #skills:after{clear: both;content: "";display: block}
  #skills{padding: 10px 0}
  .restaurantInfo img {width:300px;height: 180px }
  .imgDiv{width:300px;padding: 0 16px;height: 180px;float: left; }
  .chefTitle{ font-size: 17px; width :120px; height :24px}
  .el-icon-fork-spoon{ font-weight :600;}
  #orders{margin-top: 30px}
  #orders > .orderInfo > div> span{display: inline-block;height: 35px;padding: 2px 0;text-align: center;line-height: 39px}
  #orders > .orderInfo > div> span:nth-child(1){width: 300px;}
  #orders > .orderInfo > div> span:nth-child(2){width: 120px; }
  #orders > .orderInfo > div> span:nth-child(3){width: 130px; }
  #orders > .orderInfo > div> span:nth-child(4){width: 130px; }
  #orders > .orderInfo > div> span:nth-child(5){width: 130px; }
  #orders > .orderInfo > div> span:nth-child(6){width: 130px; }
.percess {
  position: absolute;
  right: 60px;
  top: 190px;
}










</style>
